<template>
  <div class="map">
    <h3 class="title">国内疫情地图</h3>
    <div class="tab" style="margin-top: 20px">
      <el-radio-group v-model="radio1" size="small" @change="changeMap">
        <el-radio-button label="累计确诊"></el-radio-button>
        <el-radio-button label="现存确诊"></el-radio-button>
      </el-radio-group>
    </div>
    <div id="main" style="width:70vw;height:38vw;margin:0 auto;">
    </div>
  </div>

</template>

<script>
import { getStatisticsChinaAPI } from '@/api/index.js'
export default {
  name: 'Map',
  data() {
    return {
      radio1: '累计确诊',
      arrGobal: [],
      arrNow: []
    }
  },
  created() {
    this.confirm()
    this.nowConfirm()
  },
  watch: {
    // 监听到arrGobal数组变化时，自动执行一次这个函数
    arrGobal: {
      handler() {
        this.setConfirm()
      }
    }
  },
  methods: {
    // 点击按钮改变地图数据
    changeMap(value) {
      console.log(value)
      if (value === '累计确诊') {
        this.setConfirm()
      } else if (value === '现存确诊') {
        this.setNowConfirm()
      }
    },

    // 请求各地区累计确诊疫情数据
    async confirm() {
      const { data: res } = await getStatisticsChinaAPI()
      const citys = res.data.diseaseh5Shelf.areaTree[0].children

      // 取出地名和确诊数
      for (let i = 0; i < citys.length; i++) {
        const obj = {}
        obj.name = citys[i].name
        obj.value = citys[i].total.confirm

        this.arrGobal.push(obj)
      }
    },

    // 请求各地区现存确诊疫情数据
    async nowConfirm() {
      const { data: res } = await getStatisticsChinaAPI()
      const citys = res.data.diseaseh5Shelf.areaTree[0].children
      // 取出地名和确诊数
      for (let i = 0; i < citys.length; i++) {
        const obj = {}
        obj.name = citys[i].name
        obj.value = citys[i].total.nowConfirm

        this.arrNow.push(obj)
      }
    },

    // 将累计确诊数据渲染到页面上
    setConfirm() {
      const title = '累计确诊'
      // 将数据和地图显示位置传入echarts中
      this.$myChart.getChinaMap('main', this.arrGobal, title)
    },

    // 将现存确诊数据渲染到页面上
    setNowConfirm() {
      const title = '现存确诊'
      // 将数据和地图显示位置传入echarts中
      this.$myChart.getChinaMap('main', this.arrNow, title)
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  position: relative;
  .tab {
    position: absolute;
    z-index: 1;
  }
}
</style>
